﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Analysis.aspx.cs" Inherits="Web.Analysis" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <script src="Content/echarts.min.js"></script>
    <style>
        h1{
            margin-left:2%;
            margin-top:2%;
        }
        *{
            margin:0px;
            padding:0px;
        }
        #divider{
            display: flex;
           
        }
        #divider div{
         
        }
        #main1{
           margin-left:9%;
        }
    </style>
    <h1>信息分析</h1>
    <div id="divider">
        <div>
            <div id="main" style="width: 600px;height:350px;"></div>
        <div id="main1" style="width: 500px;height:280px;"></div>
        </div>
        
        <div id="main2" style="width: 500px;height:600px;"></div>
    </div>
    
   
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var myChart1 = echarts.init(document.getElementById('main1'));
    var myChart2 = echarts.init(document.getElementById('main2'));

    // 指定图表的配置项和数据
    option = {
        title: {
            text: '用户信息分析',

            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'center',
            top: '10%'
        },
        series: [
            {
                name: '比例',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 94, name: '男' },
                    { value: 107, name: '女' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    option1 = {
        title: {
            text: '用户住址分布',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '6%',
            left: 'center'
        },
        series: [
            {
                name: '分布数据',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 62, name: '重庆渝北' },
                    { value: 30, name: '重庆沙坪坝' },
                    { value: 26, name: '北京海淀' },
                    { value: 3, name: '上海浦东' },
                    { value: 68, name: '四川成都' },
                    { value: 11, name: '重庆北碚' }
                ]
            }
        ]
    };
    let category = [];
    let dottedBase = +new Date();
    let lineData = [];
    let barData = [];

    for (let i = 0; i < 20; i++) {
        let date = new Date((dottedBase += 3600 * 24 * 1000));
        category.push(
            [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
        );
        let b = Math.random() * 200;
        let d = Math.random() * 200;
        barData.push(b);
        lineData.push(d + b);
    }

    // option
    option2 = {
        title: {
            text: '用户注册时间'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: ['5月', '6月', '7月', '8月', '9月', '10月']
        },
        series: [
            {
                name: '2011',
                type: 'bar',
                data: [18203, 23489, 29034, 104970, 131744, 630230]
            },
            {
                name: '2012',
                type: 'bar',
                data: [19325, 23438, 31000, 121594, 134141, 681807]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    myChart1.setOption(option1);
    myChart2.setOption(option2);

</script>
</asp:Content>
